{% extends 'layout/base.html' %}

{% block content %}
<div class="row mt-5">
    <div class="col-lg-3">
        {% set active_nav = 'webpush' %}
        {% include 'config/includes/sidebar.html' %}
    </div>
    <div class="col-lg-5">
        <h4>Web Push Notifications</h4>
        <form action="{{ url_for('config.webpush_save') }}" method="post">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

            <p><small>To generate a VAPID keypair <a href="#" id="vapid-generate-key">click here</a></small></p>

            <div class="form-group row">
                <div class="col">
                    <label for="webpush_enabled">Enable Push Notifications</label>
                </div>
                <div class="col text-right">
                    <div class="custom-control custom-switch">
                        <input name="webpush_enabled" type="checkbox" class="custom-control-input" id="webpush_enabled" value="1" {{ 'checked' if setting_get('webpush_enabled', False) == True }}>
                        <label class="custom-control-label" for="webpush_enabled"></label>
                    </div>
                </div>
            </div>

            <div class="form-group row">
                <div class="col">
                    <label for="vapid_private">VAPID Private Key</label>
                </div>
                <div class="col">
                    <input name="vapid_private" type="password" id="vapid_private" class="form-control text-right" value="{{ '********' if setting_get('vapid_private', '')|length > 0 }}" placeholder="" required>
                </div>
            </div>

            <div class="form-group row">
                <div class="col">
                    <label for="vapid_public">VAPID Public Key</label>
                </div>
                <div class="col">
                    <input name="vapid_public" type="text" id="vapid_public" class="form-control text-right" value="{{ setting_get('vapid_public', '') }}" placeholder="" required>
                </div>
            </div>

            <div class="form-group">
                <button type="submit" class="btn btn-block btn-primary">save</button>
            </div>
        </form>
    </div>
    <div class="col"></div>
</div>

<script type="text/javascript" src="{{ url_for('static', filename='js/webpush/vapid.generate.js') }}"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('#vapid-generate-key').click(function() {
            VAPIDKeyGeneration.generate('#vapid_public', '#vapid_private');
            return false;
        });
    });
</script>
{% endblock %}